<template>
  <div id="advert" class="container">
    <!-- 表单数据 -->
    <el-drawer :visible.sync="dataShow" title="表单数据" size="90%" destroy-on-close>
      <detail :id="id" />
    </el-drawer>
    <!-- 表单设计 -->
    <!-- <el-drawer :visible.sync="designShow" title="表单设计" size="90%" destroy-on-close>
      <design :id="id" @success="designSuccess" />
    </el-drawer> -->
    <!-- 分享问卷 -->
    <el-dialog :visible.sync="shareShow" title="分享问卷" size="90%" destroy-on-close>
      <share :code="code" @success="shareSuccess" />
    </el-dialog>

    <el-dialog :title="title" :visible.sync="dialogShow" width="40%" destroy-on-close>
      <save-dialog :formdata="formData" @success="handleSuccess" />
    </el-dialog>

    <div class="search">
      <el-form ref="searchForm" size="small" :model="searchForm" inline label-width="90px">
        <el-form-item label="表单名称" prop="name">
          <el-input v-model="searchForm.name" @keyup.enter.native="search(searchForm)" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search(searchForm)">查 询</el-button>
          <el-button @click="reset(searchForm)">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <h3 class="title"><span />表单管理</h3>
    <el-button
      type="primary"
      class="add"
      size="small"
      icon="el-icon-plus"
      style="margin-bottom: 15px"
      @click="goAdd"
    >添加
    </el-button>
    <el-table
      :data="orderData"
      border
      stripe
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column label="表单ID" prop="id" />
      <el-table-column label="表单标识" prop="code" show-overflow-tooltip />
      <el-table-column label="表单名称" prop="name" show-overflow-tooltip />
      <el-table-column label="类型" prop="type">
        <template slot-scope="scope">
          <div v-if="scope.row.type == 2">问卷</div>
          <div v-if="scope.row.type == 1">表单</div>
        </template>
      </el-table-column>
      <el-table-column label="是否发布" prop="status">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 2"><span class="success_status" />已发布</div>
          <div v-if="scope.row.status == 1"><span class="error_status" />未发布</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status == 1"
            class="edit"
            size="mini"
            @click="editor(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="scope.row.status == 1"
            class="design"
            size="mini"
            @click="design(scope.row)"
          >设计</el-button>
          <el-button
            v-if="scope.row.status == 1"
            class="deploy"
            size="mini"
            @click="deploy(scope.row)"
          >发布</el-button>
          <el-button
            v-if="scope.row.status == 2"
            class="edit"
            size="mini"
            @click="undeploy(scope.row)"
          >卸载</el-button>
          <el-button
            v-if="scope.row.status == 2 && scope.row.type == 2"
            class="edit"
            size="mini"
            @click="share(scope.row)"
          >分享</el-button>
          <el-button
            v-if="scope.row.status == 2"
            class="deploy"
            size="mini"
            @click="detail(scope.row)"
          >表单数据</el-button>
          <el-button
            v-if="scope.row.status == 1"
            size="mini"
            class="dele"
            @click="del(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      :hide-on-single-page="page.total < page.size ? true : false"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import formApi from '@/api/form.js'
import design from './components/design.vue'
import saveDialog from './components/save.vue'
import detail from './components/detail.vue'
import share from './components/share.vue'

export default {
  components: {
    saveDialog,
    detail,
    share
  },
  data() {
    return {
      code: '',
      title: '添加表单',
      dataShow: false,
      shareShow: false,
      dialogShow: false,
      designShow: false,
      searchForm: {
        name: ''
      },
      formData: {},
      design_content: {},
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      val: {},
      id: 0,
      loading: true,
      orderData: []
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    // this.getTikets()
  },
  updated() {},
  methods: {
    search(val) {
      this.getList()
    },
    reset() {
      this.searchForm.name = ''
      this.getList()
    },
    goAdd() {
      this.formData = {
        type: 1
      }
      this.title = '添加表单'
      this.dialogShow = true
    },
    editor(row) {
      this.formData = row
      this.title = '编辑表单'
      this.dialogShow = true
    },
    // 列表
    getList() {
      this.val.page = this.page.currentPage
      this.val.limit = this.page.size
      this.val.name = this.searchForm.name
      formApi.list(this.val).then((res) => {
        this.orderData = res.data
        this.page.total = res.count
      })
    },
    design(row) {
      this.id = row.id
      // 设计页面
      this.$router.push({
        path: '/form/design',
        query: {
          id: row.id
        }
      })
    },
    async deploy(row) {
      const res = await formApi.deploy({ id: row.id })
      if (res.code == 0) {
        this.getList()
        this.$message.success(res.msg)
      } else {
        this.$message.error(res.msg)
      }
    },
    undeploy(row) {
      this.$confirm('卸载表单会清除表单数据，已收集的数据无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await formApi.undeploy({ id: row.id })
          if (res.code == 0) {
            this.getList()
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {})
    },
    del(row) {
      this.$confirm('您确定要删除该表单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await formApi.del({ id: row.id })
          if (res.code == 0) {
            this.getList()
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {})
    },
    handleSuccess() {
      this.getList()
      this.dialogShow = false
    },
    designSuccess() {
      this.designShow = false
      this.getList()
    },
    shareSuccess() {
      this.shareShow = false
    },
    share(row) {
      this.code = row.code
      this.shareShow = true
    },
    detail(row) {
      this.id = row.id
      // 数据详情页面
      this.$router.push({
        path: '/form/detail',
        query: {
          id: row.id
        }
      })
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    }
  }
}
</script>
<style lang="scss">
.design {
	background: #6f6f95;
	color: #fff;
}

.deploy {
	background: #409eff;
	color: #fff;
}

.attachment .el-dialog {
	.el-dialog__body {
		height: 600px;
	}

	.el-table {
		.attachmentImg {
			width: 60px;
			height: 60px;
		}
	}

	.el-button--primary {
		background-color: #f84311;
		border-color: #f84311;
		border-radius: 20px;
	}
}

#advert {
	// .advert{
	//   .el-select{
	//       width: calc(100% - 100px);
	//   }
	//   .el-date-editor.el-input{
	//     width: calc(100% - 100px);
	//   }
	// }
	.addForm .el-form-item {
		width: 100%;
	}

	.addForm .el-form-item__content {
		width: calc(100% - 100px);
	}

	.el-date-editor.el-input {
		width: 100%;
	}
}
</style>
<style scoped lang="scss">
.el-table {
	margin-bottom: 20px;
}

.search {
	min-width: 1350px;
	background-color: #fff;
	padding: 35px 30px 20px;
	border-radius: 5px;
	margin-bottom: 20px;
}

.avatar {
	max-width: 200px;
}

.attachment_imgBox {
	.videoName {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}
}

.error_status {
	background: #f56c6c;
	border-radius: 50px;
	display: inline-block;
	width: 5px;
	height: 5px;
	position: relative;
	top: -2px;
	left: -2px;
}

.success_status {
	background: #0bb278;
	border-radius: 50px;
	display: inline-block;
	width: 5px;
	height: 5px;
	position: relative;
	top: -2px;
	left: -2px;
}
</style>
